<template>
	<div class="wrapper">
		<div class="back">
			<router-link to='/' tag='div' class='iconfont icon-back'>&#xe624</router-link>
		</div>
		<div class='detailBar' v-show='flag' v-bind:style='opacityStyle'>
		<router-link to='/' tag='div' class='iconfont iconback'>&#xe624</router-link>
		 景点详情
	  </div>
	</div>
</template>
<script>
export default{
 	name:'detailBanner',
 	data:function(){
 		return {flag:false,
 			opacityStyle:{
 				opacity:0
 			}
 		}
 	},
 	methods:{
 		handleScroll:function(){
 			//const只准赋值一次不是只有一个值
 			var top=document.documentElement.scrollTop;
 			if(top>60){
 				let opacity=top/140;
 				this.opacityStyle.opacity=opacity>1?1:opacity;
 				this.flag=true
 			}else{
 				this.flag=false
 			}
 		}
 	},
 	//因为使用keep-active所以多出activated钩子，当整个页面进来会执行activated钩子
 	activated:function(){
 		//给所有页面添加滑动事件，因此会影响其他页面,使用deacivated当切换到其他页面时取消此事件解决
 		window.addEventListener('scroll',this.handleScroll);
 		document.documentElement.scrollTop=0;
 	},
 	deactivated:function(){
 		window.removeEventListener('scroll',this.handleScroll);
 	}
 }
</script>
<style lang='stylus' scoped>
@import '~styles/varibles.styl'
.wrapper
	height:200rem
	.back
		position:absolute
		top:0.1rem
		left:0.1rem
		height:0.6rem
		width:0.6rem
		background:rgba(0,0,0,0.8)
		border-radius:0.4rem
		text-align:center
		line-height:0.6rem
		.icon-back
			font-size:0.4rem
			color:#fff
	.detailBar
		z-index:99
		position:fixed
		top:0
		left:0
		height:0.7rem
		width:100%
		line-height:0.7rem
		font-size:0.3rem
		text-align:center
		overflow:hidden
		background:$bgColor
		color:#fff
		.iconback
			position:absolute
			top:0
			left:0
			width:0.64rem
			color:#fff
</style>